import 'package:flutter/material.dart';
// 监听ListView的滚动通知，然后显示当前滚动进度百分比
class ScrollNotificationTestRoute extends StatefulWidget {
  const ScrollNotificationTestRoute({super.key});

  @override
  _ScrollNotificationTestRouteState createState() =>
      _ScrollNotificationTestRouteState();
}

// 修改后的状态类代码
class _ScrollNotificationTestRouteState
    extends State<ScrollNotificationTestRoute> {
  String _progress = "0%";
  // 新增四个状态变量存储滚动指标
  String _extentBefore = "0.0";
  String _extentInside = "0.0";
  String _extentAfter = "0.0";
  String _atEdge = "false";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scrollbar(
        child: NotificationListener<ScrollNotification>(
          onNotification: (ScrollNotification notification) {
            final metrics = notification.metrics;
            setState(() {
              // 更新所有指标值
              // pixels：当前滚动位置。
              // maxScrollExtent：最大可滚动长度。
              // extentBefore：滑出ViewPort顶部的长度；此示例中相当于顶部滑出屏幕上方的列表长度。
              // extentInside：ViewPort内部长度；此示例中屏幕显示的列表部分的长度。
              // extentAfter：列表中未滑入ViewPort部分的长度；此示例中列表底部未显示到屏幕范围部分的长度。
              // atEdge：是否滑到了可滚动组件的边界（此示例中相当于列表顶或底部）
              _progress = "${(metrics.pixels / metrics.maxScrollExtent * 100).toInt()}%";
              _extentBefore = metrics.extentBefore.toStringAsFixed(1);
              _extentInside = metrics.extentInside.toStringAsFixed(1);
              _extentAfter = metrics.extentAfter.toStringAsFixed(1);
              _atEdge = metrics.atEdge.toString();
            });
            return false;
          },
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              ListView.builder(
                itemCount: 100,
                itemExtent: 50.0,
                itemBuilder: (context, index) => Material(
                  child: ListTile(title: Text("$index")),
                ),
              ),
              // 修改后的指标显示组件
              Container(
                padding: EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: Colors.black54,
                  borderRadius: BorderRadius.circular(16),
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _buildMetricText("进度: $_progress"),
                    _buildMetricText("顶部滑出: $_extentBefore"),
                    _buildMetricText("可视区域: $_extentInside"),
                    _buildMetricText("底部剩余: $_extentAfter"),
                    _buildMetricText("边界状态: $_atEdge"),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 辅助方法：构建统一样式的文本组件
  Widget _buildMetricText(String text) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 4),
      child: Text(
        text,
        style: TextStyle(
          color: Colors.white,
          fontSize: 14,
          fontWeight: FontWeight.w500,
        ),
      ),
    );
  }
}
